Creando un editor colaborativo con Nuxt UI, Jazz e IA

Construyendo un editor colaborativo en tiempo real con Nuxt UI, Jazz e IA: arquitectura, decisiones técnicas y lecciones del vibe coding

El ecosistema JavaScript moderno ofrece docenas de soluciones preconstruidas para editores de texto enriquecido, desde ProseMirror hasta Tiptap, pasando por Quill o Slate. Sin embargo, integrar cualquiera de estas opciones dentro de una arquitectura Nuxt con colaboración en tiempo real, comentarios contextuales y soporte multiusuario sin perder el control total del código base representa un desafío no trivial. Este artículo documenta el proceso de construcción de un editor colaborativo desde los cimientos utilizando Nuxt UI como capa de interfaz, Jazz como infraestructura de datos distribuidos y agentes de inteligencia artificial como copiloto de desarrollo, una práctica que la comunidad ha comenzado a denominar vibe coding.

La motivación: control total sobre el ecosistema Nuxt

La decisión de construir una solución propia en lugar de adoptar una librería consolidada no fue arbitraria. Las opciones prefabricadas disponibles presentaban fricciones técnicas difíciles de ignorar: dependencias opacas difíciles de auditar, modelos de datos que no se alineaban con la arquitectura reactiva de Vue 3, y esquemas de sincronización que requerían backends propios con WebSockets administrados manualmente. Mantener una dependencia externa en el núcleo de un producto significa aceptar sus limitaciones como propias, lo cual resulta especialmente problemático cuando el editor es una pieza central de la experiencia de usuario.

El ecosistema Nuxt, con su combinación de renderizado híbrido, composables reactivos y la integración nativa con el sistema de módulos de Vue, ofrecía las condiciones ideales para construir una solución cohesiva. Nuxt UI, por su parte, aportaba un sistema de diseño coherente basado en Tailwind CSS con componentes accesibles y altamente configurables, eliminando la necesidad de construir la capa visual desde cero. La combinación de estos dos vectores, control arquitectónico total y componentes UI de alta calidad, estableció la base del proyecto.

Jazz como infraestructura de datos colaborativos

La elección de Jazz como capa de sincronización merece una explicación técnica detallada. Jazz es una librería de datos locales-primeros (local-first) que implementa CRDTs (Conflict-free Replicated Data Types) para resolver conflictos de escritura concurrente sin necesidad de un servidor centralizado de autoridad. A diferencia de soluciones como Firebase Realtime Database o Supabase Realtime, Jazz desplaza la lógica de sincronización al cliente, lo que reduce la latencia percibida y mantiene la aplicación funcional incluso en condiciones de conectividad intermitente.

Desde una perspectiva de integración con Vue 3, Jazz expone sus estructuras de datos como objetos observables que pueden envolver en composables reactivos. Esto permite que las actualizaciones del documento provenientes de otros colaboradores disparen el ciclo de reactividad de Vue de forma transparente, sin necesidad de gestionar manualmente eventos de WebSocket o mecanismos de diff. El resultado es una arquitectura donde el estado del documento actúa como una fuente de verdad distribuida y reactiva simultáneamente.

// Ejemplo simplificado de composable Jazz + Vue 3
import { useCoState } from 'jazz-vue'
import { DocumentSchema } from '~/schemas/document'

export function useCollaborativeDocument(id: string) {
  const doc = useCoState(DocumentSchema, id, {
    resolve: { comments: true, blocks: true }
  })

  const updateBlock = async (blockId: string, content: string) => {
    if (!doc.value) return
    doc.value.blocks[blockId].content = content
  }

  return { doc, updateBlock }
}

Características clave del sistema resultante

El editor desarrollado implementa un conjunto de funcionalidades que lo sitúan en paridad funcional con soluciones comerciales de referencia como Notion o Linear. La arquitectura de bloques permite que cada unidad de contenido sea un nodo independiente con su propio identificador CRDT, lo que minimiza los conflictos de edición cuando múltiples usuarios modifican secciones distintas del documento de forma simultánea.

• Soporte multiusuario en tiempo real: presencia de cursores, indicadores de usuario activo y resolución automática de conflictos mediante CRDTs de Jazz.
• Comentarios contextuales estilo Notion: los comentarios se anclan a rangos de texto específicos mediante referencias a identificadores de bloque, persistiendo incluso cuando el contenido circundante es modificado.
• Carga y gestión de imágenes: integración con almacenamiento de objetos compatible con S3, con preview optimista antes de completarse la carga remota.
• Resolución de respuestas: los hilos de comentarios pueden marcarse como resueltos, con un historial trazable de quién resolvió y cuándo.
• Historial de versiones: aprovechando el log inmutable de operaciones de Jazz para reconstruir estados anteriores del documento.

El rol de la inteligencia artificial: del tutorial al vibe coding

El proceso de desarrollo de este proyecto estuvo profundamente asistido por agentes de IA, en particular mediante sesiones extendidas con modelos de lenguaje grande capaces de generar, refactorizar y depurar código. Lo que inicialmente se concibió como un tutorial lineal paso a paso evolucionó orgánicamente hacia una reflexión sobre cómo los flujos de trabajo guiados por IA transforman la naturaleza misma del acto de programar. El vibe coding, término popularizado recientemente en la comunidad de desarrollo, describe precisamente esta modalidad: el desarrollador articula intenciones en lenguaje natural, el agente genera implementaciones, y el humano actúa como revisor arquitectónico y árbitro de calidad.

Sin embargo, el proceso no estuvo exento de fricciones instructivas. Los agentes de IA demostraron una tendencia recurrente a generar código sintácticamente correcto pero funcionalmente incorrecto cuando operaban sin retroalimentación del entorno de ejecución real. La lección más valiosa extraída del proceso fue la necesidad de forzar iteraciones verificadas en el navegador: en lugar de solicitar al agente que generase bloques de código extensos de una sola vez, el flujo más eficiente consistió en intercalar micro-implementaciones con ciclos de prueba manual en el entorno de desarrollo, reportando los errores reales del navegador de vuelta al agente para su corrección.

"Un agente de IA sin acceso al entorno de ejecución es como un arquitecto que diseña edificios sin ver el terreno. El resultado puede ser impecable sobre el papel y completamente inviable en la práctica."

Lecciones técnicas sobre el desarrollo guiado por agentes

Más allá de la anécdota, el proyecto produjo un conjunto de aprendizajes metodológicos concretos sobre cómo integrar agentes de IA en flujos de trabajo de desarrollo profesional. La verificación iterativa mediante el navegador resultó ser el mecanismo de retroalimentación más efectivo, superando con creces la estrategia de revisar el código generado de forma estática. Los errores de runtime, especialmente aquellos relacionados con la reactividad de Vue 3 y el modelo de permisos de Jazz, rara vez eran detectables mediante revisión textual del código.

1. Granularidad de las instrucciones: solicitudes específicas y acotadas producen resultados más confiables que especificaciones amplias. "Implementa el composable useCollaborativeDocument que envuelva useCoState de Jazz y exponga un método updateBlock" es más efectivo que "construye la capa de datos del editor".
2. Retroalimentación desde el entorno real: copiar y pegar errores exactos de la consola del navegador o de la terminal en el contexto del agente acelera drásticamente la convergencia hacia una solución funcional.
3. Verificación del contexto del agente: los modelos de lenguaje pueden perder coherencia en sesiones largas. Reiniciar el contexto con un resumen estructurado del estado actual del proyecto es una práctica que previene alucinaciones acumulativas.
4. Separación de responsabilidades humano-agente: las decisiones arquitectónicas de alto nivel deben permanecer bajo control humano. El agente es más efectivo como implementador que como diseñador de sistemas.
5. Auditoría de dependencias generadas: los agentes tienden a sugerir paquetes sin verificar su compatibilidad con versiones específicas del stack. Toda dependencia sugerida debe ser validada contra el package.json existente antes de su instalación.

Disponibilidad y contribución a la comunidad

El proyecto ha sido publicado como código abierto, con la intención explícita de que sirva como punto de partida para equipos que necesiten un editor colaborativo integrado nativamente en el ecosistema Nuxt sin depender de soluciones propietarias. El repositorio incluye documentación de la arquitectura de datos, instrucciones de configuración de Jazz para entornos locales y en producción, y una guía de extensión para añadir nuevos tipos de bloques al esquema CRDT.

La contribución más significativa de este proyecto a la comunidad no es, sin embargo, el código en sí mismo, sino la documentación honesta del proceso de desarrollo asistido por IA. En un ecosistema donde el vibe coding genera simultáneamente entusiasmo e inquietud entre profesionales, documentar sus limitaciones reales con la misma fidelidad que sus ventajas resulta técnicamente más valioso que cualquier demostración optimista de productividad. La IA acelera la implementación; la experiencia del desarrollador sigue siendo el factor determinante en la calidad arquitectónica del resultado.